  <template>
  <div class="wrapper">
    <!--    返回    -->
    <div class="registerWrapper">
      <!--    背景图    -->
      <img class="backgroundImg" src="../../../assets/static/register/b2.png" alt=""/>
      <!--   返回    -->
      <div class="revertImgWrapper">
        <img class="revertImg" src="../../../assets/static/publicImg/back.png" alt=""/>
      </div>
    </div>
    <div class="registerInfoWrapper">
      <!--  图标  -->
      <div class="logoImgWrapper">
        <img class="logoImg" src="../../../assets/static/register/l1.png" alt=""/>
      </div>
      <!--  验证码  -->
      <div class="registerCodeWrapper">
        <!--   title   -->
        <div class="registerTitleWrapper">
          <span class="registerTitle">请输入发送到以下号码的6位数验证码</span>
        </div>
        <div class="verificationCodeWrapper">
          <!--   验证码   -->
          <div class="verificationCodeInfoWrapper">
            <!--   区号   -->
            <div class="areaCodeWrapper">
              <span class="areaCode">sG65 1020304050</span>
            </div>
            <!--   输入验证码   -->
            <div class="enterCodeWrapper">
              <div class="anInputBoxWrapper">
                <img class="inputBox" src="../../../assets/static/register/b1.png" alt=""/>
                <span class="code">6</span>
              </div>
              <div class="anInputBoxWrapper1">
                <img class="inputBox" src="../../../assets/static/register/b1.png" alt=""/>
                <span class="code">6</span>
              </div>
              <div class="anInputBoxWrapper2">
                <img class="inputBox" src="../../../assets/static/register/b1.png" alt=""/>
                <span class="code">6</span>
              </div>
              <div class="anInputBoxWrapper3">
                <img class="inputBox" src="../../../assets/static/register/b1.png" alt=""/>
                <span class="code">6</span>
              </div>
              <div class="anInputBoxWrapper4">
                <img class="inputBox" src="../../../assets/static/register/b1.png" alt=""/>
                <span class="code">6</span>
              </div>
              <div class="anInputBoxWrapper5">
                <img class="inputBox" src="../../../assets/static/register/b1.png" alt=""/>
                <span class="code">6</span>
              </div>
            </div>
          </div>
          <!--   发送验证码   -->
          <div class="sendCodeWrapper">
            <!--   没有收到验证码   -->
            <div class="noReceivedWrapper">
              <span class="noReceive">没有收到验证码？</span>
            </div>
            <!--   发送验证码按钮   -->
            <div class="sendCodeButtonWrapper">
              <img class="sendCodeImg" src="../../../assets/static/register/b3.png" alt=""/>
              <button class="sendCode">发送验证码</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {}
</script>

<style>
/*-------------- div居中 -----------------*/
.wrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.registerWrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.revertImgWrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.registerInfoWrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.areaCodeWrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.verificationCodeWrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.verificationCodeInfoWrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.enterCodeWrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.anInputBoxWrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.anInputBoxWrapper1{
  display: flex;
  align-items: center;
  justify-content: center;
}
.anInputBoxWrapper2{
  display: flex;
  align-items: center;
  justify-content: center;
}
.anInputBoxWrapper3{
  display: flex;
  align-items: center;
  justify-content: center;
}
.anInputBoxWrapper4{
  display: flex;
  align-items: center;
  justify-content: center;
}
.anInputBoxWrapper5{
  display: flex;
  align-items: center;
  justify-content: center;
}
.sendCodeWrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.noReceivedWrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.sendCodeButtonWrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
/*-------------- span字体 -----------------*/
.registerTitle{
  font-size: 30px;
  font-family: Alibaba PuHuiTi;
  font-weight: bold;
  color: #333333;
}
.areaCode{
  font-size: 28px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #999999;
}
.code{
  font-size: 30px;
  font-family: Alibaba PuHuiTi;
  font-weight: bold;
  color: #333333;
}
.noReceive{
  font-size: 22px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #61BF02;
}
.sendCode{
  font-size: 28px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #FFFFFF;
}
/*-------------- img图片 -----------------*/
.backgroundImg{
  width: 748.9px;
  height: 925.1px;
}
.revertImg{
  width: 17px;
  height: 29px;
}
.logoImg{
  width: 526px;
  height: 220px;
}
.inputBox{
  width: 96px;
  height: 80px;
}
.sendCodeImg{
  width: 588px;
  height: 148px;
}
</style>
